<template>
  <div class="littlemodel-main">
    <div class="LittleModel" v-for="(obj,index) in list" :key="index">
        <div class="headImg">
            <img :src="obj.user_img" alt="">
        </div>
        <div class="userinfo">
            <span class="name_">{{ obj.user_name }}</span>
            <span class="age_">{{ obj.user_age }}岁</span>
            <span class="sex_"></span>
        </div>
        <div class="userState">血糖过高</div>
        <div class="btn">
            <el-button type="primary" @click="searchXq(obj.user_id)">查看详情</el-button>
        </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
axios.defaults.baseURL = "http://localhost:8080"
export default {
    created(){
        this.homePeopleLoad()
    },
    methods:{
        homePeopleLoad(){
            axios({
                url:"/sign/getAllPeople",
                method:"get"
            }).then((res) =>{
                let arr = res.data
                for(let i=0; i<arr.length;i++){
                    if(i<=2){
                        this.list.push(arr[i])
                    }
                }
            })
        },
        searchXq(id){
            this.$router.push({
                path:"/searchXq",
                query:{
                    id:id
                }
            })
        }
    },
    data () {
        return {
            list:[]
        }
    }
}
</script>

<style>
    .littlemodel-main{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .LittleModel{
        width: 230px;
        height: 280px;
        border-radius: 10px;
        box-shadow: 0 0 5px darkgray;
        margin-top: 20px;
        float: left;
        transition: 0.3s;
    }
    .LittleModel:hover{
        background: #F2F7FB;
        box-shadow: 0 0 0px darkgray;
    }
    .headImg{
        width: 65px;
        height: 65px;
        border-radius: 50%;
        box-shadow: 0 8px 8px darkgray;
        margin: 0 auto;
        margin-top: 40px;
        overflow: hidden;
    }
    .headImg img{
        width: 100%;
    }
    .userinfo{
        width: 100%;
        height: 40px;
        margin-top: 10px;
        line-height: 40px;
        text-align: center;
    }
    .userinfo span{
        display: inline-block;
    }
    .name_{
        font-size: 18px;
    }
    .age_{
        font-size: 13px;
        color: darkgray;
        margin-left: 5px;
    }
    .userState{
        text-align: center;
        font-size: 13px;
        color: #FA7B72;
        margin-top: 5px;
    }
    .btn{
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 25px;
    }
    .btn .el-button{
        padding: 10px 30px;
        box-shadow: 0 0 6px #2984F8;
    }
</style>